import React from 'react'




import banner1 from '../../Static/img/banner1.jpg'
import banner2 from '../../Static/img/banner2.jpg'
import banner3 from '../../Static/img/banner3.jpg'
import { Carousel, WingBlank } from 'antd-mobile';
// import StoreList from './StoreList/StoreList'
import './Banner.css'
import { NavLink } from 'react-router-dom';
class App extends React.Component {
    state = {
        data: [banner1, banner2, banner3],
        imgHeight: 200,
    }
    componentDidMount() {
        // simulate img loading
        // setTimeout(() => {
        //     this.setState({
        //         data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
        //     });
        // }, 100);
    }
    render() {
        return (
            <WingBlank style={{ margin: 0 }}>
                <Carousel
                    style={{ margin: 0 }}
                    autoplay={false}
                    infinite
                    autoplayInterval={5000}
                // beforeChange={(from, to) => }
                // afterChange={index => console.log('slide to', index)}
                >
                    {this.state.data.map(val => (
                        <NavLink
                            key={val}
                            to={`/Home/ShopDetails?shop_id=4`}
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'), { passive: false });
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </NavLink>
                    ))}
                </Carousel>
            </WingBlank>
        );
    }
}


export default App